<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	    *{
	    	margin:0;padding:0;
	    }
	    #div1{
	    	width:1000px;height:150px;background:red;position: relative;margin:100px auto;overflow: hidden;
	    }
	    #div1 ul{
            position: absolute;top:0;left:0;height:150px;
	    }
	    #div1 ul li{
	    	list-style:none;float:left;
	    }
        #div1 ul li img{
        	width:250px;height:150px;
        }
	</style>
	<script type="text/javascript">
        window.onload = function(){
        	var oDiv = document.getElementById('div1');
        	oUl = oDiv.getElementsByTagName('ul')[0];
        	aLi = oUl.getElementsByTagName('li');


        	//定个速度变量，控制滚动的方向
        	var speed = -2; //默认向左


        	//拼接多4个li
        	oUl.innerHTML += oUl.innerHTML;

        	//计算ul的总宽度,li的宽度乘以总的li个数
        	oUl.style.width = aLi[0].offsetWidth*aLi.length+'px';


        	//定时器
        	function move(){
        		//向左滚动
        	    //当他向左滚到到一半时,把他重新拉回left=0的位置
        	    if(oUl.offsetLeft<-oUl.offsetWidth/2){
        	   	   oUl.style.left = '0';
        	    }
                //oUl.style.left = oUl.offsetLeft-2+'px';  //向左速度-2

                //向右滚动
                //当他向右滚动到0的位置，把他重新来回左边一半的位置
                if(oUl.offsetLeft>0){
                	oUl.style.left = -oUl.offsetWidth/2+'px';
                }
                oUl.style.left = oUl.offsetLeft+speed+'px';  //向右速度+2
        	};

        	var timer = setInterval(move,30);


        	//当鼠标移入时暂停滚动，也就是暂停定时器
        	oDiv.onmouseover = function(){
        		clearInterval(timer);
        	}

        	//当鼠标移开，重新滚动，开启定时器
        	oDiv.onmouseout = function(){
        		timer = setInterval(move,30);
        	}

            //通过改变速度的正负来改变方向
        	//点击向左按钮，向左走
        	document.getElementsByTagName('a')[0].onclick = function(){
        		speed = -2;
        	}
        	//点击向右按钮，向右走
        	document.getElementsByTagName('a')[1].onclick = function(){
        		speed = 2;
        	}
        }

	</script>
</head>
<body>
    <a href="javascript:;">向左走</a>
    <a href="javascript:;">向右走</a>
    <div id="div1">
       
    	<ul>
    		<li><img src="../img/a1.jpg"></li>
    		<li><img src="../img/a2.jpg"></li>
    		<li><img src="../img/a3.jpg"></li>
    		<li><img src="../img/a4.jpg"></li>
    	</ul>
    </div>
	
</body>
</html>